<template>
  <view v-if="false">

    <view class="px-4 py-2 text-gray-400 text-sm">
        玩家群资料
    </view>

    <view class="h-12 bg-white" @click="jumpGamerSet">
      <view class="px-4 h-full flex items-center justify-between">
        <view>玩家群资料设置</view>
        <image class="w-4 h-4" src="@/static/image/rt.png"></image>
      </view>
    </view>

    <view class="px-4 py-2 text-gray-400 text-sm">
      玩家群显示位置申请
    </view>

    <view class="h-12 bg-white border-bottom">
      <view class="px-4 h-full flex items-center justify-between ">
        <view>首页弹窗提示</view>
        <view class="text-gray-300 text-sm flex items-center">
          点击申请
          <image class="w-4 h-4" src="@/static/image/rt.png"></image>
        </view>
      </view>
    </view>
    <view class="h-12 bg-white">
      <view class="px-4 h-full flex items-center justify-between">
        <view>个人中心弹窗提示</view>
        <view class="text-gray-300 text-sm flex items-center">
          点击申请
          <image class="w-4 h-4" src="@/static/image/rt.png"></image>
        </view>
      </view>
    </view>

    <view class="px-4 py-2 text-gray-400 text-sm">
      玩家群设置说明
    </view>

    <view class="h-12 bg-white">
      <view class="px-4 h-full flex items-center justify-between">
        <view>玩家群设置说明</view>
        <view class="text-gray-300 text-sm flex items-center">
          玩家群设置说明
          <image class="w-4 h-4" src="@/static/image/rt.png"></image>
        </view>
      </view>
    </view>

  </view>

  <view class="h-12 bg-white border-bottom" @click="uploadEwm">
    <view class="px-4 h-full flex items-center justify-between">
      <view>玩家群二维码 <text class="text-xs text-gray-400">请按1:1比例上传</text></view>
      <view class="flex items-center">
        <image class="w-8 h-8 mr-2" :src="qrcode" @click.stop="previewImage([qrcode])" v-if="qrcode"></image>
        <image class="w-4 h-4" src="@/static/image/rt.png"></image>
      </view>
    </view>
  </view>

  <view class="h-12 bg-white border-bottom" @click="openWxPop">
    <view class="px-4 h-full flex items-center justify-between">
      <view class="">微信号</view>
      <view class="flex-1 h-full flex items-center justify-end px-2">{{ wxCode }}</view>
      <image class="w-4 h-4" src="@/static/image/rt.png"></image>
    </view>
  </view>

  <view class="flex items-center justify-center w-80 h-10 m-auto mt-6 bg-indigo-500 rounded-3xl text-white" v-if="saveFlag" @click="saveFanInfo">保 存</view>

  <view class="flex items-center justify-center w-80 h-10 m-auto mt-6 bg-indigo-200 rounded-3xl text-white" v-else> 保 存 </view>

  <!--微信号弹窗-->
  <uni-popup ref="wxPopRef" type="center" :mask-click="true">
    <view class="rounded-xl bg-white p-4 box-border" style="width: 480rpx">
      <view class="text-center text-sm">微信号</view>
      <input class="ipt" placeholder="请输入微信号" placeholder-class="plcg" v-model="enterWxCode">

      <view class="mt-3 flex gap-4">
        <view @click="closeWxPop" class="text-xs h-6 flex-1 bg-gray-200 rounded-2xl flex items-center justify-center">取消</view>
        <view @click="confirmWxPop" class="text-xs text-white h-6 flex-1 bg-indigo-500 rounded-2xl flex items-center justify-center">确定</view>
      </view>
    </view>
  </uni-popup>

</template>

<script setup lang="ts">
    import { ref, computed, nextTick, onMounted  } from 'vue'
    import { setInfoApi, getInfoApi } from '@/api/fan/index'
    import { fileUpload } from '@/api/public/index'
    import { throttle } from '@/api/common'
    import { configStore } from '@/store/configStore'
    import { uiwu } from "@/api/interface/interface";

    const qrcode = ref<string>('')
    const wxCode = ref<string>('')

    // const jumpGamerSet = () => {
    //   uni.navigateTo({ url: '/pages/fan/gamerSet' })
    // }

    onMounted(() => {
      getInfoData()
    })

    const getInfoData = async () => {
      const res = await getInfoApi()
      const { chat_qrcode, wechat_no } = res.data
      qrcode.value = chat_qrcode
      wxCode.value = wechat_no
    }

    const uploadEwm = () => {
      uni.chooseImage({
        success: async (chooseImageRes) => {

          console.log('chooseImageRes===', chooseImageRes)
          uni.getImageInfo({
            src: chooseImageRes.tempFilePaths[0],
            success: async(image) => {
              console.log('image===', image)
              /** 图片必须1:1比例上传 **/
              const { width, height } = image
              if(width != height) {
                uiwu.toast('图片比例不对,请重新上传')
                return
              } else {
                uploadServer(chooseImageRes.tempFilePaths[0])
              }
            }
          })


        }
      })
    }

    /** 图片上传服务器 **/
    const uploadServer = async(filePath) => {
      uni.showLoading({ title: '正在上传...' })
      const data = await fileUpload({
        name: 'file',
        filePath
      })
      if(data.status != 200) {
        uiwu.toast(data.msg)
      }else {
        nextTick(() => {
          qrcode.value = data.data.url
        })
        uiwu.toast(data.msg)
      }
      // uni.hideLoading()

    }

    /** 预览图片 **/
    const previewImage = (imageArray) => {
      uni.previewImage({ urls: imageArray })
    }

    /**保存-btn**/
    const configData = configStore()
    const saveFanInfo = throttle( async() => {
        await setInfoApi({
          chat_qrcode: qrcode.value,
          wechat_no: wxCode.value
        })
        await configData.initInfoData()

        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
        uiwu.toast('保存成功')
    }, 3000)

    /** 微信号弹窗 **/
    const wxPopRef = ref()
    const enterWxCode = ref<string>('')
    const openWxPop = () => {
      enterWxCode.value = wxCode.value
      wxPopRef.value.open()
    }
    /** 取消微信号 **/
    const closeWxPop = () => {
      enterWxCode.value = ''
      wxPopRef.value.close()
    }

    /** 确认微信号 **/
    const confirmWxPop = () => {
      wxCode.value = enterWxCode.value
      closeWxPop()
    }


    const saveFlag = computed(() => {
      if( qrcode.value && wxCode.value ) return true
    })
</script>

<style scoped lang="scss">
  page {
    min-height: 100vh;
    background: #f5f5f5;
  }
  .ipt {
    height: 50rpx;
    margin-top: 20rpx;
    padding: 0 40rpx;
    border: 2rpx solid #f5f5f5;
    border-radius: 10rpx;
    font-size: 24rpx;
  }
</style>
